<template>
<div>
   	<Modal v-model="is_showing" :title="'【'+abutment.title+'】对接详情'" width="95" :mask-closable="false" :styles="{top: '20px'}" @on-visible-change="handleCloseModal">
        <p slot="title">对接描述</p>
        <div v-if="!is_loading">
            <Card>
                <Row>
                    <Col span="12">
                        <p><strong>对接单号：</strong>{{abutment.number}}</p>
                    </Col>
                    <Col span="12">
                        <p><strong>对接标题：</strong>{{abutment.title}}</p>
                    </Col>
                </Row>
                <Row>
                    <Col span="12">
                        <p><strong>服务项目：</strong><a :href="'/#/index/service_detail/'+abutment.service_id" target="_blank">{{abutment.service_name}}</a></p>
                    </Col>
                    <Col span="12">
                        <p><strong>服务机构：</strong><a :href="'/#/index/personal_exhibition/'+abutment.service_member_id" target="_blank">{{abutment.service_enterprise}}</a></p>
                    </Col>
                </Row>
                <Row>
                    <Col span="12">
                        <p><strong>需求项目：</strong><a :href="'/#/index/demand_detail/'+abutment.demand_id" target="_blank">{{abutment.demand_name}}</a></p>
                    </Col>
                    <Col span="12">
                        <p><strong>企业个人：</strong><a :href="'/#/index/personal_exhibition/'+abutment.demand_member_id" target="_blank">{{abutment.demand_enterprise}}</a></p>
                    </Col>
                </Row>
                <Row>
                    <Col span="24">
                        <p><strong>对接描述：</strong>{{abutment.description}}</p>
                    </Col>
                </Row>
            </Card>
            <Card>
                <p slot="title">对接进度</p>
                <Steps :current="abutmentProgressValue">
                    <Step v-for="item in abutmentProgress" :title="item[0]" :content="item[1]"></Step>
                </Steps>    
            </Card>
            <Collapse v-if="statusMessage[2]==1||statusMessage[2]==2" value="1">
                <Panel name="1">
                    合作流程<span v-if="false&&statusMessage[3]!=1 && (abutment.service_status == 3 || abutment.demand_status == 3)" style="color:red;padding-left:10px;">*在双方确认合作完成之前仍可执行合作流程</span>
                    <div slot="content">
                        <div v-if="abutment.service_status==2&&abutment.demand_status==2">
                            <StepsEditor source-type="abutment" :source="abutment" mode="service"></StepsEditor>
                        </div>
                        <StepsEditor v-if="abutment.service_status==3||abutment.demand_status==3||statusMessage[3]==1" source-type="abutment" :source="abutment" mode="preview_all"></StepsEditor>
                    </div>
                </Panel>
            </Collapse>
            <Card v-if="abutment.service_status==3">
                <p slot="title">合同文件</p>
                <p v-for="item in abutment.contract" :key="item.id">
                    <a :href="item.url">{{ item.name }}</a>
                </p>
            </Card>
            <Card v-if="statusMessage[3]!=1 && (abutment.service_status == 3 || abutment.demand_status == 3)">
                <Row :gutter="16">
                    <Col span="12">
                        <Card v-if="abutment.demand_status==3">
                            <p slot="title">合作企业对您的评价</p>
                            <p>评分：<Rate disabled allow-half v-model="abutment.serviceRate" show-text></Rate></p>
                            <p>理由：{{abutment.serviceReason}}</p>
                        </Card>
                    </Col>
                    <Col span="12">
                        <Card v-if="abutment.service_status==3">
                            <p slot="title">我方对合作企业的评价</p>
                            <p>评分：<Rate disabled allow-half v-model="abutment.demandRate" show-text></Rate></p>
                            <p>理由：{{abutment.demandReason}}</p>
                        </Card>
                    </Col>
                </Row>
            </Card>
            <Card>
                <p style="color:red;padding:10px;text-indent:2em;">
                    <span v-if="statusMessage[1][0]=='1'">您认可企业的投递并有意向与其合作，点击【同意合作】按钮，进入合作阶段。</span>
                    <span v-if="statusMessage[1][1]=='1'">如果您对企业的投递没有兴趣，可以【拒绝合作】。</span>
                    <span v-if="statusMessage[1][2]=='1'">您与约谈的企业若能达成共识，可【同意合作】进入合作阶段。</span>
                    <span v-if="statusMessage[1][3]=='1'">若与约谈的企业不能达成共识，可以选择【放弃合作】。</span>
                    <span v-if="statusMessage[1][4]=='1'&&abutment.step_abutment_data.step_number==abutment.steps.length">合作阶段双方可以共同执行预定义的合作流程，如果双方按照流程合作顺利结束，可以点击【合作完成（上传合同并评价）】，在企业没有确认合作结束之前可以修改上传合同和评价内容。</span>
                    <span v-if="statusMessage[1][5]=='1'">如果双方合作未能按流程顺利进行，您希望中止本次合作，选择【合作中止】，本次对接的数据仍会为您保留，可作为事后依据。</span>
                </p>
                <p style="text-align:center;">
                    <Button v-if="statusMessage[1][0]=='1'" type="primary" @click="handleAgreeInterview()">同意合作</Button>
                    <Button v-if="statusMessage[1][1]=='1'" type="error" @click="modal3=true">拒绝合作</Button>
                    <Button v-if="statusMessage[1][2]=='1'" type="primary" @click="handleAgreeCooperation()">同意合作</Button>
                    <Button v-if="statusMessage[1][3]=='1'" type="error" @click="handleRefuseCooperation()">放弃合作</Button>
                    <Button v-if="statusMessage[1][4]=='1'&&abutment.step_abutment_data.step_number==abutment.steps.length" type="primary" @click="handleAgreeFinish()">合作完成（上传合同并评价）</Button>
                    <Button v-if="statusMessage[1][5]=='1'" type="error" @click="handleRefuseFinish()">合作中止</Button>
                    <span style="color:red">当前状态：{{ statusMessage[0] }}</span>
                    <span v-if="statusMessage[3]==2" style="color:red"> (拒绝原因：{{ abutment.refuse_reason }})</span>
                </p>
            </Card>
        </div>
        <Modal v-model="modal2" title="请上传合作合同并对与您合作的公司进行评分" :closable="false" :transfer="false">
            <div style="height:200px;">
                <div>
                    <p><span style="color:red;">*</span>上传合同</p>
                    <UploadedList v-model="abutment.contract" :format="['jpg','png','doc','docx']" :number="1"></UploadedList>
                </div>
                <p style="margin-top:20px;">该评分会发布到企业/机构的简介上，请合理评分</p>
                <Rate style="text-align:center;padding-left:20px;padding-top:10px;" show-text allow-half v-model="abutment.demandRate"></Rate>
                <p v-if="displayRate" style="font-size:16px;color:red">您的评分对我们非常重要，请您评分</p>
                <Input v-model="abutment.demandReason" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入您对该公司的评价"></Input>
            </div>
            <div slot="footer">
                <Button v-if="abutment.contract.length>0" type="primary" size="default"  @click="okRate()">确定</Button>
            </div>
        </Modal>
        <Modal v-model="modal3" title="请填写拒绝原因" :closable="false" :transfer="false">
            <div>
                <Input v-model="abutment.refuse_reason" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="该填写拒绝原因"></Input>
            </div>
            <div slot="footer">
                <Button type="primary" size="default"  @click="handleRefuseInterview()">确定</Button>
                <Button type="error" size="default"  @click="modal3=false">取消</Button>
            </div>
        </Modal>
        <div slot="footer">
            <Button type="ghost" @click="handleDetail()">刷新</Button>
            <Button type="ghost" @click="is_showing=false">关闭页面</Button>
        </div>
    </Modal>
</div>
</template>
<script>
import StepsEditor from "@/common/components/StepsEditor"
import Abutment from "@/common/model/Abutment"
import AbutmentParent from "./abutment_parent";
import UploadedList from "@/common/components/UploadedList";

export default {
    name: 'ServiceAbutmentPage',
    props: {
        value: {
            type: Boolean
        },
        id: {
            type: Number
        }
    },
    extends: AbutmentParent,
    components: {
        StepsEditor, UploadedList
    },
    data() {
        return {
            is_showing: false,
            abutment: new Abutment(),
            is_loading: true,
            modal2: false,
            modal3: false,
            displayRate: false
        };
    },
    computed: {
        info() {
            return this.$store.state.user.info;
        },
        statusMessage() {
            return this.serviceStatusMessage(this.abutment);
        },
        abutmentProgress() {
            var temp = [];
            if(this.abutment.sponsor == 'provider') temp.push(["发起的请求", "将编辑好的服务在金融平台上投递给您需要的企业，等待对方处理。"]);
            else temp.push(["收到的请求", "将您编辑好的服务在平台上发布，如果有企业与您约谈，可以选择接受或拒绝。"]);
            //if(!(this.statusMessage[3] && (this.abutment.demand_status < 1 || this.abutment.service_status < 1))) temp.push(["正在约谈", "接受约谈后，双方状态转换为正在约谈，双方可以进行线下约谈，可以同意合作，或者合作终止。"]);
            if(!(this.statusMessage[3] && (this.abutment.demand_status < 2 || this.abutment.service_status < 2))) temp.push(["正在合作", "合作过程中，双方状态为正在合作，如果不满意可以合作终止。"]);
            if(!this.statusMessage[3]) temp.push(["已完成", "合作完成后，双方可以点击合作结束，结束后向对方进行评分，双方状态为已结束。"]);
            if(this.statusMessage[3]) temp.push(["已取消", "合作过程中，如果有一方点击合作终止，对接状态进入到已取消。"]);
            return temp;
        },
        abutmentProgressValue() {
            if(this.statusMessage[3]) return this.abutmentProgress.length - 1;
            else return this.statusMessage[2];
        }
    },
    methods: {
        handleDetail(){
            this.is_showing = this.value;
            if(this.is_showing) {
                this.is_loading = true;
                this.api.post("abutment/get", {id: this.id}, res => {
                    this.abutment = Abutment.parse(res.data);
                    this.is_loading = false;
                });
            }
        },
        handleAgreeInterview() {
            this.$Modal.confirm({
                title: '提示框',
                content: '<p>确定接受该投递的约谈吗</p>',
                onOk: () => {
                    this.api.post("abutment/agree", {id: this.id}, res => {
                        this.abutment.service_status = 2;
                        // this.$router.push({
                        // 	name: 'service_abutment'
                        // })
                    });
                },
                onCancel: () => {
                    this.$CustomMessage.info('Clicked cancel');
                }
            });
        },
        handleAgreeCooperation(){
            this.$Modal.confirm({
                title: '提示框',
                content: '<p>确定接受该约谈的合作吗</p>',
                onOk: () => {
                    this.api.post("abutment/agree", {id: this.abutment.id}, res => {
                        this.abutment.service_status = 2;
                    });
                }
            });
        },
        handleAgreeFinish(){
            this.modal2 = true;
        },
        okRate(){
            //if(this.abutment.demandRate != 0){
                if(confirm("确定对合作的服务机构评分为"+this.abutment.demandRate+"分吗？")){
                    var temp = this.abutment.serialize();
                    this.api.post("abutment/agree", {
                        id: temp.id,
                        rate: temp.demandRate,
                        reason: temp.demandReason,
                        contract_ids: temp.contract_ids
                    }, res => {
                        this.modal2 = false;
                        this.displayRate = false;
                        this.abutment.service_status = 3;
                    });           
                }    
            //}else{
            //    this.displayRate = true;
            //} 
        },
        handleRefuseInterview() {
            this.api.post("abutment/cancel", {id: this.id, refuse_reason: this.abutment.refuse_reason }, res => {
                this.abutment.service_status = 4;
                this.modal3 = false;
            });
        },
        handleRefuseCooperation(){
            this.$Modal.confirm({
                title: '提示框',
                content: '<p>确定拒绝该约谈的合作吗</p>',
                onOk: () => {
                    this.api.post("abutment/cancel", {id: this.abutment.id}, res => {
                            this.abutment.service_status = 4;
                    });
                }
            });
        },
        handleRefuseFinish(){
            this.$Modal.confirm({
                title: '提示框',
                content: '<p>确定取消该合作吗?</p>',
                onOk: () => {
                    this.api.post("abutment/cancel", {id: this.abutment.id}, res => {
                            this.abutment.service_status = 4;
                    });
                }
            });
        },
        handleCloseModal(value) {
            if(!value) {
                this.$emit("input", value);
                this.$emit("on-close");
            }
        },
        handleSubmitCooperationProcess() {
            this.api.post("abutment/set_process", {id: this.abutment.id, process: this.abutment.process}, res => {
                this.$CustomMessage.success("提交成功");
            });
        }
    },
    watch: {
        value: "handleDetail"
    }
}
</script>
<style>
</style>
